<template>
	<view class="page">

		<!-- 订单tab -->
		<view class="order-tab">
			<view class="tab" :class="{'action':OrderType==0}" @click="onOrderTab(0,0)">
				<text>全部</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==1}" @click="onOrderTab(0,1)">
				<text>待上架({{Plisting}})</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==2}" @click="onOrderTab(1,2)">
				<text>在售中({{Onsale}})</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==3}" @click="onOrderTab(0,3)">
				<text>审核中({{Underreview}})</text>
				<text class="line"></text>
			</view>

		</view>

		<view class="head">

			<view class="title" @click="isReturn=true">商品分类></view>
			<u-input v-model="model1.userInfo.return['name']" disabled border="none"></u-input>
			<u-picker :keyName="'name'" :defaultIndex="1" :show="isReturn" :columns="shopLists" @close="close1" @confirm="confirm1"></u-picker>

			<view class="edit" @click="isEdit = !isEdit">
				<text>批量</text>
			</view>
		</view>
		<!-- 购物车列表 -->
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"
			:top="0">
			<view class="cart-list">
				<view class="list" v-for="(item, index) in goodsList" @click="onSkip('goods')" :key="index">
					<view class="check" v-if="isEdit" @click="toggleCheck(index)">
						<text class="iconfont" :class="item.isChecked ? 'icon-checked' : 'icon-check'"></text>
					</view>
					<view class="goods">
						<view class="thumb">
							<image :src="item.img_list[0]" mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">{{ item.title }}</text>
							</view>

							<view class="price-num">
								<view class="price">

									<text class="max">售价：{{ item.real_price }}</text>
									<text class="min">元</text>
								</view>
								<view class="edit" @click="table(item.id)">
									编辑
								</view>
								<view class="add" @click="toggleAdd(item)">
									{{ item.isAdd ? '下架' : '上架' }}
								</view>
							</view>
							<view class="title">
								<text class="two-omit">{{ item.reject_msg||'' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

		</mescroll-body>
		<!-- 属性规格 -->
		<goods-attr ref="GoodsAttr"></goods-attr>


	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		getStoreGoodsList,
		saveStoreGoods,
		getCategoryList
	} from '@/config/api.js';
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				Onsale: 0,
				Plisting: 0,
				Underreview: 0,
				isAdd: false,
				OrderType: 0,
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				isReturn: false,
				upOption: {
					use: false,
					toTop: {
						src: '',
					}
				},
				listQuery:{
					nav_id: uni.getStorageSync('pathNavId'),
					store_id: uni.getStorageSync('pathStoreId'),
					status: undefined,
					category_id: undefined
				},
				shopLists: [],
				show: false,
				model1: {
					userInfo: {
						return: [{name: '全部'}],
					},
				},
				isEdit: false,
				goodsList: [{
						id: 1,
						name: 'BANDALY 2020夏季女装连衣裙韩版大码宽松显瘦套装裙子两件套 JX19301 上豆绿下米白 M ',
						price: '219.00',
						vip_price: '129.00',
						img: '',
						attributes: ['金色', '大尺码'],
						is_goods: 0,
						isChecked: false,
					},
					{
						id: 1,
						name: '花花公子 卫衣男秋季圆领薄款休闲体恤男士时尚长袖T恤外套上衣男生情侣装套头衣服秋天男装 白色 XL',
						price: '139.00',
						vip_price: '99.00',
						attributes: ['银色', '中尺码'],
						img: '',
						is_goods: 1,
						isChecked: false,
					},
					{
						id: 1,
						name: '戴尔(DELL)成就3681英特尔酷睿i5商用办公高性能台式机电脑整机(十代i5-10400 8G 1T 三年上门售后)21.5英寸',
						price: '3699.00',
						attributes: ['银色', '中尺码'],
						vip_price: '3600.00',
						img: '',
						is_goods: 0,
						isChecked: false,
					},
					{
						id: 1,
						name: '戴尔DELL灵越5000 14英寸酷睿i5网课学习轻薄笔记本电脑(十代i5-1035G1 8G 512G MX230 2G独显)银',
						price: '4888.00',
						attributes: ['银色', '中尺码'],
						vip_price: '4999.00',
						img: '',
						is_goods: 0,
						isChecked: false,
					},
					{
						id: 1,
						name: '联想(Lenovo) 来酷 Lecoo一体台式机电脑23英寸(J4105 8G 256G SSD 三年上门）白',
						price: '4888.00',
						attributes: ['银色', '中尺码'],
						vip_price: '3600.00',
						img: '',
						is_goods: 0,
						isChecked: false,
					},
					{
						id: 1,
						name: 'Apple 2020新款 MacBook Pro 13.3【带触控栏】十代i5 16G 512G 2.0GHz 深空灰 笔记本电脑 轻薄本 MWP42CHA',
						price: '18200.00',
						vip_price: '18200.00',
						img: '',
						is_goods: 0,
						isChecked: false,
					},
				],
				showDetailItem: null,

			}
		},
		mounted() {
			uni.hideTabBar()
			getCategoryList({
				nav_id: uni.getStorageSync('pathNavId'),
			}).then(res => {
				
				this.shopLists = [[{name: '全部',id: undefined},...res]];
			})
			this.getListGoods();
		},
		computed: {
			allSelected() {
				return this.goodsList.every(item => item.isChecked);
			},
			selectedItemCount() {
				return this.goodsList.filter(item => item.isChecked).length;
			},

		},

		methods: {
			
			getListGoods(){
				getStoreGoodsList(this.listQuery).then(res => {
					this.goodsList = res.data;
					this.Onsale = res.Onsale;
					this.Plisting = res.Plisting;
					this.Underreview = res.Underreview;
					console.log(res,'==============================')
				})
			},
			toggleAdd(data) {
			
				saveStoreGoods({
					id: data.id,
					isAdd: data.isAdd?0:1
				}).then(res=>{
					this.getListGoods();
				})
			},
			//选择商品分类
			close1() {
				this.isReturn = false; // 关闭选择器
			},
			confirm1(selectedItems) {
				// selectedItems 是选中的商品类目
				
				this.model1.userInfo.return = selectedItems.value[0]; // 更新输入框的值为选中的商品类目
				console.log('哈哈哈哈', selectedItems.value[0]);
				this.listQuery.category_id = selectedItems.value[0]['id'];
				
				this.isReturn = false; // 关闭选择器
				this.getListGoods();
			},
			table(id) {
				
				uni.setStorageSync('goodsId',id)
				uni.navigateTo({
					url: '/moduleD/hongShanHun/addShop/addShop',
				})
			},
			onOrderTab(status,type) {
				this.OrderType = type;
				if(type == 2)type = 1;
				if(type == 3)type = 2;
				if(status == 0 && type == 0){
					type = '';
					status = '';
				}
				this.listQuery['status'] = type;
				this.listQuery['isAdd'] = status;
				this.getListGoods();
				// // #ifdef H5
				// uni.redirectTo({
				// 	url: '/pages/MyOrderList/MyOrderList?type=' + type,
				// })
				// //#endif

			},

			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() => {
					this.mescroll.endByPage(10, 20);
				}, 2000)
			},

			// 选择sku

			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			toggleCheck(index) {
				this.goodsList[index].isChecked = !this.goodsList[index].isChecked;
			},
			toggleSelectAll() {
				const newState = !this.allSelected;
				this.goodsList.forEach(item => {
					item.isChecked = newState;
				});
			},

			deleteSelectedItems() {
				this.goodsList = this.goodsList.filter(item => !item.isChecked); // 删除所有选中的商品
			},

			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case 'classify':
						uni.navigateTo({
							url: '/pages/SearchGoodsList/SearchGoodsList',
						})
						break;
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsDetails/GoodsDetails',
							animationType: 'zoom-fade-out',
							animationDuration: 200
						})
						break;
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	@import 'shangjia.scss';
</style>